<template>
  <div>
    <Navigation ref="nav_ref" @callbackComponent="callbackComponent"/>
    <!-- 内容页 background: url() no-repeat center  50%/cover-->
    <h1 class="text-hide ny_banner" v-for="(item,index) in banner" :key="index" :style="{background:'url('+item.url+') no-repeat center  50%/cover'}">合作品牌</h1>
    <div class="container ny_content">
      <div class="ny_nav">
        <!-- background: url(../../assets/img/bg_nav.jpg) no-repeat center left;-->
        <div class="ny_nav_h">
          <div>
            <h2>合作品牌</h2>
            <p>COOPERATIVE BRAND</p>
          </div>
        </div>
        <div class="ny_nav_dqwz">
          当前位置：合作品牌
        </div>
      </div>
      <div class="ny_view">
        <div id="ny_hzpp_lists">
          <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6 ny_imgs_hzpp" v-for="(item,index) in listData" :key="index">
              <div  class="ny_img_hzpp">
                <div class="ny_img_hzpp_bg" :style="{background: 'url('+item.url.url+') no-repeat center 50%/cover',backgroundSize:'100%',width:'200px'}">
<!--                  <img src="img/hzpp1.jpg" class="ny_img_hzpp" alt="社会实践">-->
                  <el-image
                    style="width: 100px; height: 100px;cursor:pointer"
                    :src="item.url.url"
                    :preview-src-list="srcList">
                  </el-image>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="ny_news_page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.page"
            :page-sizes="[8, 20, 30, 40,50]"
            :page-size="queryInfo.limit"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <Footer/>
  </div>
</template>

<script>
import Navigation from '../../components/Navigation'
import Footer from '../../components/Footer'
export default {
  name: 'index',
  components: {
    Navigation,
    Footer
  },
  data(){
    return{
      banner: [],
      queryInfo: {
        limit: 8,
        page: 1
      },
      srcList: [],
      total:0,
      listData:[],
    }
  },
  created () {
    this.getCooperList()
    this.getImageAll()
  },
  methods:{
    //获取所有图片
    async getImageAll(){
      const {data: res} = await this.$http.get('home/cooper_all_list')
      if (res.code !== 200) return false
      this.srcList = res.data.list
    },
    //合作客户
    async getCooperList () {
      const {data: res} = await this.$http.get('home/cooper_list', {
        params: this.queryInfo
      })
      if (res.code !== 200) return false
      this.listData = res.data.list
      this.total = res.data.totalCount
    },
    callbackComponent (params) {
      params.function && this[params.function](params.data)
    },
    getBannerList (data) {
      this.banner = data.image
    },
    handleSizeChange (newSize) {
      this.queryInfo.limit = newSize
      this.getCooperList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getCooperList()
    }
  }

}
</script>


<style>
/*带背景的分页按钮背景色begin*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #C4181F;
  color: #FFF;
}
.el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
  color: #C4181F;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #C4181F;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #C4181F;
  color: #FFF;
}
li.el-select-dropdown__item.selected {
  color: #C4181F;
}

/*设置当前页码的样式，及鼠标移上其他页码时的样式,以及左右箭头鼠标移上的样式*/

.el-select .el-input.is-focus .el-input__inner,
.el-pagination__sizes .el-input .el-input__inner:hover,
.el-select .el-input__inner:focus {
  border-color: #C4181F;
}
.el-pager li.active,.el-pager li:hover,
.el-pagination button:hover {
  color: #C4181F;
}
/*带背景的分页按钮背景色end*/
</style>
